<template>
  <div>
    <div class="tab">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="券核销" name="1" />
        <el-tab-pane label="卡核销" name="2" />
        <el-tab-pane label="预约订单" name="3" />
        <el-tab-pane label="预订订单" name="4" />
        <el-tab-pane label="自提订单" name="5" />
      </el-tabs>
    </div>
    <div class="content">
      <CouponCancel v-if="activeTab == '1'" />
      <CardCancel v-if="activeTab == '2'" />
      <XhOrder v-if="activeTab == '3'" type="3"/>
      <XhOrder v-if="activeTab == '4'" type="4"/>
      <XhOrder v-if="activeTab == '5'" type="5"/>
    </div>
  </div>
</template>

<script>
import CouponCancel from "../../vip/detail/components/CouponCancel";
import CardCancel from "../../vip/detail/components/CardCancel";
import XhOrder from "../../vip/detail/components/XhOrder";
export default {
  components: {
    CouponCancel,
    CardCancel,
    XhOrder,
  },
  data() {
    return {
      activeTab: "1",
    };
  },
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.coupon-card {
  .app-main-content-box {
    margin-bottom: 10px;
  }
}
::v-deep {
  .el-tabs__header {
    padding-left: 30px;
    margin-bottom: 10px;
    background-color: #fff;
    border-radius: 0 0 5px 5px;
  }
  .el-tabs__nav-wrap::after {
    background-color: #fff;
  }
  .el-tabs__active-bar {
    height: 4px;
  }
}
</style>
